<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		body{
			background: url(img/1.jpg);
			 height:1200px;
		}
			.imgdiv {
				width: 222px;
				height: 222px;
				position: absolute;
			}
			
			.imgdiv img {
				position: absolute;
			}
		</style>
	</head>

	<body>
		<!--<div data-routx="4" data-routy="8" class="imgdiv" style="top: 200px;left: 200px;">
			<img src="../img/ch0.png" style="opacity: 0.8;" />
			<img src="../img/ch1.png" style="opacity: 0.2;" />
			<img src="../img/ch2.png" style="opacity: 0.5;" />
		</div>
		<div data-routx="5" data-routy="5" class="imgdiv" style="top: 5px;left: 5px;">
			<img src="../img/ch0.png" style="opacity: 0.2;" />
			<img src="../img/ch1.png" style="opacity: 0.8;" />
			<img src="../img/ch2.png" style="opacity: 0.5;" />
		</div>-->
		<script type="text/javascript">
			function createImg() {
					var div = document.createElement("div");
					div.className = "imgdiv";
					div.style.top="5px";
					div.style.left="5px";
					div.setAttribute("data-routx",parseInt(Math.random()*15)+5)
					div.setAttribute("data-routy",parseInt(Math.random()*15)+5)
					for(var k = 0; k < 4; k++) {
						var img = document.createElement("img");
						img.src = "img/ch" + k + ".png";
						div.appendChild(img);
					}
					
						document.body.appendChild(div);
			}
			var num=0;
			var id=setInterval(function(){
					createImg();
					num++;
					if(num==5){
						clearInterval(id);
					}
				},2000);
			setInterval(function(){
				onMove()
			},100);
			function onMove() {
				var divs = document.getElementsByTagName("div");
				var Height = document.documentElement.clientHeight;
				var Width = document.documentElement.clientWidth;
				for(var i = 0; i < divs.length; i++) {
					var routx = parseInt(divs[i].getAttribute("data-routx"));
					var routy = parseInt(divs[i].getAttribute("data-routy"));
					var top = parseInt(divs[i].style.top);
					var left = parseInt(divs[i].style.left);
					top += routy;
					left += routx;
					divs[i].style.top=top+"px";
					divs[i].style.left=left+"px";
					if(top>=Height-222){
						routy=-routy;
						imgOpacity(divs[i])
						divs[i].style.top=(Height-222)+"px"
					}
					if(left>=Width-222){
						routx=-routx;
						imgOpacity(divs[i])
						divs[i].style.left=(Width-222)+"px"

					}
					if(top<=0){
						routy=-routy;
						imgOpacity(divs[i])
						divs[i].style.top="0px"

					}
					if(left<=0){
						routx=-routx;
						imgOpacity(divs[i])
						divs[i].style.left="0px"
					}
					
					divs[i].setAttribute("data-routx",routx);
					divs[i].setAttribute("data-routy",routy);

				}
			}
			function imgOpacity(div){
				var imgs=div.getElementsByTagName("img");
				for (var i = 0; i < imgs.length-1; i++) {
					imgs[i].style.opacity=Math.random();
				}
			}
		</script>
	</body>

</html>